import React from "react";

//#region  函数式组件
interface Props {
    num: number,
    onChange?: (n: number) => void
}
export function Count(props: Props) {
    return (
        <div>
            <button onClick={() => {
                props.onChange && props.onChange(props.num - 1)
            }}>-</button>
            <span>{props.num}</span>
            <button onClick={() => {
                props.onChange && props.onChange(props.num + 1)
            }}>+</button>
        </div>
    );
}

// 或者
export const Count2: React.FC<Props> = (props) => {
    // 多一个属性 props.children
    return (
        <div>
            <button onClick={() => {
                props.onChange && props.onChange(props.num - 1)
            }}>-</button>
            <span>{props.num}</span>
            <button onClick={() => {
                props.onChange && props.onChange(props.num + 1)
            }}>+</button>
        </div>
    );
}

//#endregion

//#region 类组件
interface IState {
    msg: string
    descr: string
}
export class CountComp extends React.Component<Props, IState> {

    // 状态初始化
    state:IState = {
        msg: "",
        descr: ""
    }

    render() {
        // this.state.msg
        return (
            <div>
                <button onClick={() => {
                    this.props.onChange && this.props.onChange(this.props.num - 1)
                }}>-</button>
                <span>{this.props.num}</span>
                <button onClick={() => {
                    this.props.onChange && this.props.onChange(this.props.num + 1)
                }}>+</button>
            </div>
        );
    }
} 

//#endregion